<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<style>
		#progress {
			stroke-dashoffset: 89;
			/* animation: circleProgress 2s infinite; */
		}

		/* @keyframes circleProgress {
			0% {
				stroke-dashoffset: 314;
			}

			100% {
				stroke-dashoffset: 0;
			}
		} */


		.progress {
			margin: 40px;
			width: 200px;
			height: 400px;
			position: relative;
		}

		.wrapper {
			width: 100px; // 修改
			height: 200px;
			box-sizing: content-box;
			overflow: hidden; // 新增
			position: absolute;
			border: 1px solid #eee;
		}

		.right {
			left: 100px;
		}

		.left {
			left: 0;
		}

		.circle {
			width: 200px;
			height: 200px;
			border-radius: 50%;
			border: 5px solid transparent;
			position: absolute; // 新增
			top: 0;
			transform: rotate(45deg); // 新增
		}

		.rightCircle {
			border-top: 5px solid #ff6600;
			border-right: 5px solid #ff6600;
			right: 0; // 新增
		}

		.leftCircle {
			border-bottom: 5px solid #53a333;
			border-left: 5px solid #53a333;
			left: 0; 
		}
	</style>
	<body>
		<svg width="500" height="200" style="transform: rotate(-90deg)">
			<circle id="progress" cx="250" cy="80" r="50" fill="#eee" stroke-width="5" stroke="#ff6600"
				stroke-dasharray="314" stroke-dashoffset="314" />
		</svg>
		
		<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
		     width="566.93px" height="566.93px" viewBox="0 0 566.93 566.93" enable-background="new 0 0 566.93 566.93" xml:space="preserve">
		
		    <path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M19.32,119.5C7.342,106.809-0.001,89.695-0.001,70.866
		    C-0.001,31.728,31.727,0,70.865,0s70.866,31.728,70.866,70.866c0,18.83-7.344,35.944-19.324,48.635"/>
		    <path fill="#FFFFFF" 
		          stroke="#ff00ff"
		          stroke-miterlimit="10"
		          stroke-linejoin="round" 
		          stroke-linecap="round" 
		          stroke-dasharray="330"
		          stroke-width="5"
		          
		          stroke-dashoffset="330" 
		          d="M19.32,119.5C7.342,106.809-0.001,89.695-0.001,70.866
		    C-0.001,31.728,31.727,0,70.865,0s70.866,31.728,70.866,70.866c0,18.83-7.344,35.944-19.324,48.635"/>
		</svg>

		<div class="progress">
			<div class="wrapper left">
				<div class="circle leftCircle"></div>
			</div>
			<div class="wrapper right">
				<div class="circle rightCircle"></div>
			</div>
		</div>

	</body>
</html>
